<template>
  <el-upload
    ref="upload"
    v-bind="$attrs"
    v-on="$listeners"
    class="upload-demo"
    :action="$attrs.action"
    :multiple="$attrs.multiple"
    :auto-upload="$attrs.autoUpload"
    :accept="$attrs.accept ? $attrs.accept : accept"
    :on-preview="handlePictureCardPreview"
    :on-change="handProgress"
    :show-file-list="false"
    :limit="$attrs.limit"
  >
    <el-input
      v-model="fieldValue"
      style="width: 70%; float: left; margin-right: 10px"
      :disabled="true"
    ></el-input>

    <el-button slot="trigger" size="medium" type="primary">上传文件</el-button>
    <el-button
      size="medium"
      type="warning"
      style="margin-left: 10px"
      @click="checkInput"
      >网络文件</el-button
    >
    <el-button size="medium" type="success" @click="selectPicture"
      >选择文件</el-button
    >
    <div slot="tip" class="xdh-form-upload__tip">{{ tipText }} 最多上传{{$attrs.limit}}个 </div>
    <ul class="el-upload-list el-upload-list--text"  v-if="imageUrl.length">
      <li tabindex="0" class="el-upload-list__item is-success" v-for="(item,inx) in imageUrl" :key="inx">
        <a class="el-upload-list__item-name" :href="item.url" target="_blank">
          <i class="el-icon-document"></i >{{item.name}}
        </a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-circle-check"></i>
        </label>
        <i class="el-icon-close" @click="handleRemove(item)"></i>
        <i class="el-icon-close-tip">按 delete 键可删除</i>
      </li>
    </ul>
  </el-upload>
</template>
<script>
export default {
  name: "uploadFile",
  props: {
    value: {
      type: [String, Number],
      default() {
        return "";
      },
    },
    uploadText: {
      type: String,
      default: "点击上传",
    },
    selectText: {
      type: String,
      default: "选取文件",
    },
    submitText: {
      type: String,
      default: "上传到服务器",
    },
    tipText: {
      type: String,
      default:
        "只能上传.sql,.mp3,.psd,.rar,.zip,.txt,.wav,.apk,.ipa,.xsl,.xsl,.exel,.word文件，且不超过10M。",
    },
    size: {
      type: String,
    },
    imageUrl: {
      type: Array,
      default: () => [],
    },
    percentage: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      accept:
        ".sql,.mp3,.psd,.rar,.zip,.txt,.wav,.apk,.ipa,.xsl,.xlsx,.exel,.word",
    };
  },
  computed: {
    fieldValue: {
      get() {
        return this.value;
      },
      set(val) {},
    },
  },
  methods: {
    handlePictureCardPreview(file) {
      this.$emit("handlePictureCardPreview", file);
    },
    handleRemove(file, fileList) {
      this.$emit("handleRemove", file, fileList);
    },
    handProgress(file, fileList) {
      file.raw.flag = 3;
      this.$emit("handProgress", file, fileList);
    },
    selectPicture() {
      this.$emit("selectPicture");
    },
    checkInput() {
      this.$emit("checkInput");
    },
  },
};
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.uplode-input-singleImage {
  text-indent: 99999px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 100;
  opacity: 0;
}
</style>